<template>
  <div @click="login">
    <el-container>
      <el-header>
        <MyHeader></MyHeader>
      </el-header>
      <el-main>
        <el-row class="swiper">
          <Swiper></Swiper>
        </el-row>
        <el-row class="list">
          <el-col v-for="item in classify.slice(0,5)" :key="item._id">
            <router-link
              :to="{
                path:'/myclassify',
                query:{
                  title:item.classify
                }
              }"
            >
              <img :src="item.icon" alt />
              <span>{{item.classify}}</span>
            </router-link>
          </el-col>
        </el-row>
        <el-row class="list">
          <el-col v-for="item in classify.slice(5,10)" :key="item._id">
            <router-link
              :to="{
                path:'/myclassify',
                query:{
                  title:item.classify
                }
              }"
            >
              <img :src="item.icon" alt />
              <span>{{item.classify}}</span>
            </router-link>
          </el-col>
        </el-row>
        <el-row class="shop-list">
          <ShopList></ShopList>
        </el-row>
      </el-main>
      <el-footer>
        <MyFooter></MyFooter>
      </el-footer>
    </el-container>
  </div>
</template>
  
  <script>
import MyFooter from "../components/MyFooter";
import MyHeader from "../components/MyHeader";
import Swiper from "../components/Swiper";
import ShopList from "../components/ShopList";
import { mapActions } from "vuex";
import axios from "axios";
export default {
  name: "MyHome",
  components: {
    MyFooter,
    MyHeader,
    Swiper,
    ShopList
  },
  data() {
    return {
      classify: []
    };
  },
  methods: {
    ...mapActions(["filterShopList"]),
    login() {
      if (document.cookie == "") {
        this.$router.push({
          path: "/login"
        });
        this.$message({
          message: "登录失效请重新登录",
          center: true,
          showClose: true,
          type: "warning"
        });
      }
    }
  },
  mounted() {
    this.filterShopList();
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
    axios.get("/getClassify").then(res => {
      this.classify = res.data;
    });
  },
  destroyed() {
    if (document.cookie == "") {
      this.$router.push({
        path: "/login"
      });
      this.$message({
        message: "登录失效请重新登录",
        center: true,
        showClose: true,
        type: "warning"
      });
    }
  }
};
</script>
  
  <style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  width: 100%;
  height: 100%;
}
a {
  color: black;
  text-decoration: none;
}
li {
  list-style: none;
}
.el-container {
  display: flex;
  height: 177.867vw !important;
}
.el-header {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 11.7333vw !important;
  background-color: #c82519;
}
.el-main {
  flex-grow: 1;
  margin-top: 11.7333vw;
  background-color: #f6f6f6;
}
.el-footer {
  width: 100%;
  height: 13.3333vw !important;
}
.swiper {
  width: 100%;
  height: 37.3333vw;
}
.list {
  width: 100%;
  height: 19.7333vw !important;
  margin-top: 2.6666vw;
}
.list .el-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 20%;
  height: 100%;
}
a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
}
.list .el-col img {
  width: 50%;
}
.list .el-col span {
  font-size: 3.2vw;
  color: #666;
}
.shop-list {
  width: 100%;
}
</style>